<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>02_拖拽基础-碰撞效果</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            img {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;
                width: 100px;
                height: 100px;

            }

            div {
                position: absolute;
                width: 100px;
                height: 100px;
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <div></div>

        <img src="./img/1.jpg">

        <script>
            var div = document.querySelector('div');

            div.onmousedown = function(event){
                var eleX = div.offsetLeft;
                var eleY = div.offsetTop;

                var startX = event.clientX;
                var startY = event.clientY;

                document.onmousemove = function(event){
                    var endX = event.clientX;
                    var endY = event.clientY;

                    var disX = endX - startX;
                    var disY = endY - startY;

                    var lastX = disX + eleX;
                    var lastY = disY + eleY;


                    if(lastX >= document.documentElement.clientWidth - div.offsetWidth){
                        lastX = document.documentElement.clientWidth - div.offsetWidth
                    }else if (lastX <= 0){
                        lastX = 0;
                    }

                    if(lastY >= document.documentElement.clientHeight - div.offsetHeight){
                        lastY = document.documentElement.clientHeight - div.offsetHeight
                    }else if(lastY <= 0) {
                        lastY = 0;
                    }

                    div.style.left = lastX + 'px';
                    div.style.top = lastY + 'px';

                    // 碰撞效果
                    var img = document.querySelector('img');
                    // 左
                    var divL = div.offsetLeft + div.clientWidth;
                    var imgL = img.offsetLeft;

                    // 上
                    var divT = div.offsetTop + div.clientHeight;
                    var imgT = img.offsetTop;

                    // 右
                    var imgR = img.offsetLeft + img.clientWidth;
                    var divR = div.offsetLeft;

                    // 下
                    var imgB = img.offsetTop + img.clientHeight;
                    var divB = div.offsetTop;

                    // 不会变
                    if(divL < imgL || divT < imgT || imgR < divR || imgB < divB){
                        img.src = './img/1.jpg';
                    }else{
                    // 变了
                        img.src = './img/2.jpg';
                    }



                }

                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null;
                }
                return false;

            }
        </script>
    </body>
</html>